<!DOCTYPE html>
<html>
<head>
  <title>udpxy 高级配置</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 600px; margin: 20px auto; padding: 20px; }
    .form-group { margin: 15px 0; }
    label { display: block; margin: 5px 0; }
    input[type="number"] { width: 200px; padding: 5px; }
    select { width: 200px; padding: 5px; }
    #custom-source { display: none; margin-top: 5px; }
    button { background: #4CAF50; color: white; padding: 10px; border: none; cursor: pointer; }
    .default-btn { background: #666; margin-left: 10px; }
  </style>
</head>
<body>
  <h1>udpxy 高级配置</h1>
  <form action="/cgi-bin/udpxy-config" method="GET" onsubmit="return validateForm()">
    <div class="form-group">
      <label><input type="checkbox" name="enabled" value="1" checked> 启用 udpxy 服务</label>
    </div>

    <div class="form-group">
      <label>端口号:</label>
      <input type="number" name="port" min="1" max="65535" value="4022" required>
    </div>

    <div class="form-group">
      <label>网络接口 (source):</label>
      <select name="source" id="source-select" onchange="toggleCustomSource()">
        <option value="wan">wan</option>
        <option value="wan2">wan2</option>
        <option value="wan3">wan3</option>
        <option value="wan4">wan4</option>
        <option value="lan">lan</option>
        <option value="custom">自定义</option>
      </select>
      <input type="text" name="custom-source" id="custom-source" placeholder="输入接口名称(例如eth0.2)">
    </div>

    <div class="form-group">
      <label>最大客户端数 (max_clients):</label>
      <input type="number" name="max_clients" min="1" value="5" required>
    </div>

    <button type="submit">保存配置</button>
    <button type="button" class="default-btn" onclick="restoreDefaults()">恢复默认</button>
  </form>

  <script>
    // 显示/隐藏自定义接口输入框
    function toggleCustomSource() {
      const select = document.getElementById('source-select');
      const customInput = document.getElementById('custom-source');
      customInput.style.display = (select.value === 'custom') ? 'block' : 'none';
    }

    // 恢复默认设置
    function restoreDefaults() {
      if (confirm('确定要恢复默认配置吗？')) {
        document.querySelector('[name="enabled"]').checked = true;
        document.querySelector('[name="port"]').value = '4022';
        document.querySelector('#source-select').value = 'wan';
        document.querySelector('[name="max_clients"]').value = '5';
        document.getElementById('custom-source').value = '';
        toggleCustomSource();
      }
    }

    // 表单验证
    function validateForm() {
      const port = document.querySelector('[name="port"]').value;
      if (port < 1 || port > 65535) {
        alert('端口号必须在 1-65535 之间！');
        return false;
      }
      return true;
    }
  </script>
</body>
</html>